<template>
  <div>
  <ul>
    <li
      v-for="product in products"
      :key="product.id">
      {{ product.title }} - {{ product.price}}
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <button @click="addshoppingcar(product)">查看商品</button>
    </li>
  </ul>
  <el-row  v-for="product in products"
      :key="product.id">
    <el-col :span="6" :offset="6">
      <el-image
      style="width: 100px; height: 100px"
      :src="product.imge"
      fit="contain"></el-image>
    </el-col>
    <el-col :span="6">{{ product.title }}  <span>价格：{{ product.price}} </span>
     </el-col>
     <el-col :span="1">
       <el-button type="info">查看商品</el-button>
     </el-col>
     
  </el-row>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: mapState({
    products: state => state.products.all
  }),
  methods: {
    addshoppingcar(data) {

      // window.location.href="#/hello"
      this.$router.push({name: 'showpro', params: data})
    },
    ...mapActions('products', ['init']) 
  },
  created () {
    this.$store.dispatch('products/init')
  }
}
</script>